﻿<style>

.col22 
{
	padding-top: 20px;
    width: 200px;
}
.col33
{
	padding-top: 20px;
    width: 110px;
}
.col44 {
    padding-top: 20px;
    width: 150px;
}
.col55 {
    padding-top: 15px;
    width: 70px;
}
.col66 {
    padding-top: 20px;
    width: 200px;
}

.col77 {
    padding-top: 15px;
    width: 110px;
}

.col88 {
    padding-top: 15px;
    width: 70px;
}

.col_cor {
	color:blue;
}


.col2_2 
{
    width: 200px;
}
.col3_3 
{

    width: 100px;
}
.col4_4 {

    width: 120px;
}
.col5_5 {
 
    width: 120px;
}

.cart_table_title_clone {
    background: none repeat scroll 0 0 #f4f4f4;
    font-weight: bold;
    line-height: 35px;
}

.cart_table_title_clone2 {
    background: none repeat scroll 0 0 #f4f4f4;
}

</style>
	 

<section class=" fl" style="margin: 0 auto;width: 1000px;">
	<div class="cartStep1 cartStep" style="margin-top: 10px;">
		<div class="regis_box_title">Hoàn tất Đơn Hàng</div>
		<div class="cart_table">
			<div class="cart_table_title">
				<div class="fl col col22 col_cor" style="padding-top: 20px;">Tên KH</div>
				<div class="fl col col33 col_cor" style="padding-top: 20px;">SDT</div>
				<div class="fl col col33 col_cor" style="padding-top: 20px;">Tổn Tiền</div>
				<div class="fl col col44 col_cor" style="padding-top: 20px;">Ngày tạo</div>
				<div class="fl col col77 col_cor" style="padding-top: 20px;">Duyệt</div>
				<div class="fl col col88 col_cor" style="padding-top: 20px;">Xoá</div>
				<div class="clr"></div>
			</div>
			<div  data-bind="foreach: Orders">
				<div class="cart_table_line cartItemDetail" style="border:1px solid #CCCCCC;  background: #DAE3E2">				
					<div class="fl col col22">
						<b><span data-bind="text:CustomerName" style="font-weight:normal "></span></b>
					</div>
					
					<div class="fl col col33">
						<span data-bind="text : CustomerPhone"></span> 
					</div>
					
					<div class="fl col col33">
						<span data-bind="text : Total"></span>
					</div>
					
					<div class="fl col col44">
						<span data-bind="text : DateCreated"></span>
					</div>
					<div class="fl col col77">
						<button type="button"  data-bind="click: $root.Finish">Hoàn Tất</button>
					</div>
					<div class="fl col col88">
						<button type="button"  data-bind="click: $root.removeOrder">Xóa</button>
					</div>
					<div class="clr"></div>
					<div class="fl">
						<p><b>Nhận Hàng tại:</b> <span data-bind="text : Address"></span></p>
					</div>
					<div class="clr"></div>
					
					<div class="cart_table">
						<div class="cart_table_title_clone">
							<div class="fr col col5_5">Thành Tiền</div>
							<div class="fr col col4_4">Giá</div>
							<div class="fr col col3_3">Số lượng</div>
							<div class="fr col col2_2">Sản phẩm</div>
							
							<div class="clr"></div>
						</div>
							<div  data-bind="foreach: OrderDetail">
								<div class="cart_table_title_clone2">
									<div class=" cartItemDetail">
										<div class="fr col col5_5">
											<span data-bind="text : SubTotal"></span>
										</div>

											
										<div class="fr col col4_4">
											<span data-bind="text : UnitCost"></span>
										</div>

					
										<div class="fr col col3_3">
											<span data-bind="text : Quantity"></span> 
										</div>


										<div class="fr col col2_2">
											<b><span data-bind="text:Name" style="font-weight:normal "></span></b>
										</div>

									</div>
									<div class="clr"></div>
								</div>

							</div>
					</div>
				@*<div class="cart_line"></div>*@
				</div>
			</div>
			
		</div>
	</div>
</div>

</section>

<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../Scripts/Models/User.js" type="text/javascript"></script>
<script type="text/javascript">

	function Shiper(data) {
		this.UserID = data.UserID;
		this.Name = data.Name;
		this.Address = data.Address;
	}
	
	function OrderDetail(data) {
		this.ProductId = data.ProductId;
		this.Name = data.Product.Name;
		this.Quantity = data.Quantity;
		this.UnitCost = data.UnitCost;
		this.SubTotal = data.SubTotal;
	}

	function Order(data) {
		this.Id = data.Id;
		this.CustomerName = data.CustomerName;
		this.CustomerPhone = data.CustomerPhone;
		this.Status = data.Status;
		this.Total = data.Total;
		var createDay = new Date(data.DateCreated);
		this.DateCreated = formatDate(createDay,4);
		this.SellerID = data.SellerID;
		this.ShippingInfo = data.ShippingInfo;
		this.Address = "Của Hàng";
		if (this.ShippingInfo != null)
			this.Address = this.ShippingInfo.Address;
			
		this.OrderDetail = $.map(data.OrderDetails, function (item) { return new OrderDetail(item); });
	}

	function CheckOrderModel() {
		// Data
		var self = this;
		self.Orders = ko.observableArray();
		$.getJSON("/api/products/GetCheckedOrder", function (allData) {
			var mappedUsers = $.map(allData, function (item) { return new Order(item); });
			self.Orders(mappedUsers);
		});


		self.removeOrder = function (order) {
			$.ajax({
				url: '/api/products/DeleteOrder/' + order.Id,
				type: 'DELETE',
				contentType: "application/json; charset=utf-8",
				context: order,
				success: function (results, status) {
					if (status == "success") {
						dhtmlx.alert({
							title: "Đã xóa đơn hàng của:",
							text: this.CustomerName,
							ok: "OK",
							callback: function (result) {
								self.Orders.remove(order);
							}
						});
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						title: "Xóa thất bại : ",
						text: this.CustomerName,
						ok: "OK",
						callback: function (result) {
							window.location.href = window.location.href;
						}
					});
				}
			});
		};


		self.Finish = function(order) {
			$.ajax({
				url: '/api/products/PutFinishOrder/' + order.Id,
				type: 'PUT',
				contentType: "application/json; charset=utf-8",
				context: order,
				success: function(results, status) {
					if (status == "success") {
						dhtmlx.alert({
							title: "Hoàn thành!",
							text: this.CustomerName,
							ok: "OK",
							callback: function(result) {
								self.Orders.remove(order);
							}
						});
					}
				},
				error: function(results, status) {
					dhtmlx.alert({
						type: "alert-error",
						title: "Thất bại!",
						text: this.CustomerName,
						ok: "OK",
						callback: function(result) {
							window.location.href = window.location.href;
						}
					});
				}
			});
		};

	};

	ko.applyBindings(new CheckOrderModel());
</script>